<template>
    <div>
        <a-page-header
            title="基础表单"
            :ghost="false"
            sub-title="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景"
        />

        <a-card>
            <template #title> 基础表单 </template>
            <a-row type="flex" justify="center">
                <a-col :span="16">
                    <a-form
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 16 }"
                    >
                        <a-form-item label="标题">
                            <a-input placeholder="标题" />
                        </a-form-item>
                        <a-form-item label="起止日期">
                            <a-range-picker style="width: 100%" />
                        </a-form-item>
                        <a-form-item label="描述">
                            <a-text-area
                                :auto-size="{ minRows: 2, maxRows: 5 }"
                                placeholder="test"
                            />
                        </a-form-item>
                        <a-form-item label="客户">
                            <a-input placeholder="" />
                        </a-form-item>
                        <a-form-item label="权重">
                            <a-input-number :min="0" :max="100" />
                            <span> %</span>
                        </a-form-item>

                        <a-form-item :wrapper-col="{ span: 16, offset: 4 }">
                            <a-button type="primary">提交</a-button>
                            <a-button>取消</a-button>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import {
    Result, PageHeader,
    Row, Col, Card, Steps, Button, Form, Input, Radio,
    Checkbox, Switch, DatePicker, Select, InputNumber, Divider
} from "ant-design-vue";

export default defineComponent({
    components: {
        ACard: Card,
        ASteps: Steps,
        AStep: Steps.Step,
        AButton: Button,
        AForm: Form,
        AFormItem: Form.Item,
        AInput: Input,
        AInputNumber: InputNumber,
        ATextArea: Input.TextArea,
        ARadio: Radio,
        ARadioGroup: Radio.Group,
        ACheckbox: Checkbox,
        ACheckboxGroup: Checkbox.Group,
        ASwitch: Switch,
        ARangePicker: DatePicker.RangePicker,
        ASelect: Select,
        ASelectOption: Select.Option,
        ARow: Row,
        ACol: Col,
        ADivider: Divider,
        AResult: Result,
        APageHeader: PageHeader
    },
    setup() {

    }
});
</script>

<style lang="less" scoped>
</style>
